<script lang="ts" setup>
import { CmnList } from '@/api/type/globale';
import { PostPatientPatam } from '@/api/type/user';
import { getCmnListAPI, getRegionAPI, getUserPatientAPI, postPatientAPI, updatePatientAPI } from '@/api/user';
import { ElMessage, FormInstance } from 'element-plus';
import { CascaderProps } from 'element-plus/lib/components/index.js';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route=useRoute()
const router=useRouter()
const formRef=ref<FormInstance>()
const patientParam=ref({
  birthdate: '',
  certificatesNo: '',
  certificatesType: '',
  contactsCertificatesNo: '',
  contactsCertificatesType: '',
  contactsName: '',
  contactsPhone: '',
  isInsure: 0,
  isMarry:0,
  name: '',
  phone: '',
  sex: 0,
  addressSelected:['']
} as PostPatientPatam)

//获取证件类型  地区数据
const certificatesType =ref<CmnList>()
const getData=async()=>{
  const res=await getCmnListAPI()
  certificatesType.value=res.data
}

//层级选择器
const props: CascaderProps = {
  lazy: true,
 async lazyLoad (node:any, resolve) {
      const regionList=await getRegionAPI(node.data?.value||'86')
      const showData = regionList.data.map(item => ({
        value:item.value,
        label:item.name,
        leaf: !item.hasChildren,
      }))
      resolve(showData)
  },
}

//如果有id回显数据
const getPatientInfo=async()=>{
  const res=await getUserPatientAPI(route.query.id as string)
  patientParam.value=res.data as PostPatientPatam
}

//保存事件
const save=async()=>{
  if(route.query.id){
    await updatePatientAPI(patientParam.value)
  }else {
  await postPatientAPI(patientParam.value)
  }
  ElMessage.success(route.query.id?'更新成功':'添加成功')
  patientParam.value={
  birthdate: '',
  certificatesNo: '',
  certificatesType: '',
  contactsCertificatesNo: '',
  contactsCertificatesType: '',
  contactsName: '',
  contactsPhone: '',
  isInsure: 0,
  isMarry:0,
  name: '',
  phone: '',
  sex: 0,
  addressSelected:['']
} as PostPatientPatam
  router.back()
}

onMounted(()=>{
  if(route.query.id){
   getPatientInfo()
  }
  getData()
})
</script>


<template>
  <div class="add">
    <div class="header_title"> 添加就诊人</div>
    <div class="sub_title">
      <div class="block"></div>
      就诊人信息
    </div>
    <div class="content">
      <el-form label-width="auto" :model="patientParam" ref="formRef">
        <el-form-item label="姓名:" prop="name">
           <el-input v-model="patientParam.name" placeholder="请输入真实姓名全称"  size="small" style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:" prop="certificatesType">
          <el-select v-model="patientParam.certificatesType" placeholder="请选择证件类型"  size="small"
            style="width: 240px" >
            <el-option v-for="item in certificatesType" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:" prop="certificatesNo">
           <el-input v-model="patientParam.certificatesNo"  placeholder="请输入证件号码"  size="small" style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="性别:" prop="sex">
          <el-radio-group v-model="patientParam.sex" >
            <el-radio value="1">男</el-radio>
            <el-radio value="0">女</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期:" prop="birthdate">
          <el-date-picker v-model="patientParam.birthdate" value-format="YYYY-MM-DD" type="date" placeholder="选择日期"
            size="small" style="width: 240px" />
        </el-form-item>
        <el-form-item label="手机号码:" prop="phone">
           <el-input v-model="patientParam.phone" placeholder="请输入手机号码"  size="small" style="width: 240px;" ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="sub_title">
      <div class="block"></div>
      建档信息（完善后部分医院首次就诊不排队建档）
    </div>
    <div class="content">
      <el-form label-width="auto" :model="patientParam"  ref="formRef">
        <el-form-item label="婚姻状况:" prop="isMarry">
          <el-radio-group v-model="patientParam.isMarry">
            <el-radio value="0">未婚</el-radio>
            <el-radio value="1">已婚</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保:" prop="isInsure">
          <el-radio-group v-model="patientParam.isInsure" >
            <el-radio value="1">自费</el-radio>
            <el-radio value="0">医保</el-radio>
           </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址:" prop="addressSelected">
          <el-cascader v-model="patientParam.addressSelected" :props="props"/>
        </el-form-item>
        <el-form-item label="详细地址:" prop="address">
           <el-input v-model="patientParam.address" placeholder="应公安机关要求，请填写现真实住址" size="small" style="width: 240px;"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="sub_title">
      <div class="block"></div>
      联系人信息（选填）
    </div>
    <div class="content">
      <el-form label-width="auto">
        <el-form-item label="姓名:" :model="patientParam" ref="formRef" >
           <el-input placeholder="请输入联系人姓名全称" v-model="patientParam.contactsName"  size="small" style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="证件类型:">
          <el-select v-model="patientParam.contactsCertificatesType"  placeholder="请选择证件类型" size="small"   style="width: 240px" >
            <el-option v-for="item in certificatesType" :key="item.id" :label="item.name" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码:">
           <el-input v-model="patientParam.contactsCertificatesNo"  size="small" style="width: 240px;"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
           <el-input v-model="patientParam.contactsPhone" placeholder="请输入联系人手机号码" size="small" style="width: 240px;"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-row style="height: 200px;" type="flex" justify="end" align="middle" >
      <el-col :span="16">
         <el-button @click="save" style="width: 140px;" type="primary">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
.add {
  .header_title {
    color: #333;
    font-weight: 700;
  }
  .sub_title {
    display: flex;
    font-size: 14px;
    color: #999;
    margin-top: 60px;
    .block {
      width: 4px;
      height: 14px;
      background-color: #4990F1;
      border-radius: 2px;
      margin-right: 6px;
    }
  }
  .content {
    margin: 20px 0 0 140px;
    padding-bottom:30px ;
  }
}
</style>